<template>
    <div class="container">
        <div class="avatar">
            <div class="avatar2"><el-avatar shape="square" :size="80"
                :src="userInfo?.avatar?(config.API_URL +'/'+userInfo.avatar):'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fwx3.sinaimg.cn%2Fmw690%2F006WYq6ngy1hrnbjfvr1oj30u00u0q3p.jpg&thumburl=https%3A%2F%2Fimg0.baidu.com%2Fit%2Fu%3D870975181%2C849440641%26fm%3D253%26fmt%3Dauto%26app%3D120%26f%3DJPEG%3Fw%3D500%26h%3D500'" />
            </div>
            <div class="user_name">
                <b>{{ userInfo?.userName }}</b>
                <br>
                <div style="float: left;"><el-icon style="margin-top: 10px;"><Message /></el-icon></div>
                <div style="margin-top: 5px;"><el-text style="margin-left: 10px;">{{ userInfo?.email }}</el-text></div>
            </div>

        </div>

        <div class="main">
            <div class="left_container">
                <el-card class="left_card">
                    <el-button class="edit" plain type="success" @click="showUserDetail=true">编辑个人资料</el-button>
                    <el-divider />
                    <h3>个人简介</h3>
                    <el-text>{{ userInfo?.introduction ? userInfo.introduction : "无" }}</el-text>
                    <el-divider />
                    <div v-if="props.userId === loginUserId">
                        <div>
                            <h3>我的收藏</h3>
                        </div>

                        <div v-if="userProblemCollectList?.items.length === 0"><el-text>无</el-text></div>
                        <div>
                            <el-table :data="userProblemCollectList.items" show-overflow-tooltip>
                                <el-table-column>
                                    <template #default="scope">
                                        {{ scope.row.problemId }} - {{ scope.row.problemDescribe }}
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="pagination"><el-pagination layout="prev, pager, next"
                                    :page-size="userProblemCollectParm.pageSize"
                                    :current-page="userProblemCollectParm.pageNo" :total="userProblemCollectList.counts"
                                    @current-change="handlePageChange2" /></div>
                        </div>
                    </div>
                </el-card>
            </div>

            <div class="right_container">
                <el-card class="right_top">
                    <div class="right_top_left">
                        <el-row>
                            <el-col :span="6"><el-statistic title="测验分" :value="ranking?.rankingScore" /></el-col>
                            <el-col :span="6"><el-statistic title="全站排名"
                                    :value="ranking?.ranking + '/' + ranking?.totalUser" /></el-col>
                        </el-row>
                        <div class="echarts" ref="chartRef"></div>
                    </div>
                    <div class="right_top_right">
                        <div style="margin-top: -30px;"><el-text>刷题记录</el-text></div>
                        <div class="echarts_right" ref="chartRefRight"></div>
                    </div>
                </el-card>

                <el-card class="right_main">
                    <el-menu mode="horizontal" default-active="1" @select="handleSelect">
                        <el-menu-item index="1">刷题</el-menu-item>
                        <el-menu-item index="2">测验</el-menu-item>
                        <el-menu-item index="3">考试</el-menu-item>
                    </el-menu>

                    <el-table v-if="currentValue === '3'" :data="userExamList" style="height: 320px;">
                        <el-table-column prop="id" show-overflow-tooltip label="id" />
                        <el-table-column prop="examName" show-overflow-tooltip label="考试名" />
                        <el-table-column show-overflow-tooltip label="得分">
                            <template #default="scope">
                                {{ scope.row.getScore }} / {{ scope.row.score }}
                            </template>
                        </el-table-column>

                        <el-table-column show-overflow-tooltip label="排名">
                            <template #default="scope">
                                {{ scope.row.ranking }} / {{ scope.row.peopleNum }}
                            </template>
                        </el-table-column>

                    </el-table>

                    <el-table v-else-if="currentValue === '2'" :data="testList" style="height: 320px;">
                        <el-table-column prop="id" show-overflow-tooltip label="id" />
                        <el-table-column prop="testName" show-overflow-tooltip label="测验名" />
                        <el-table-column prop="score" show-overflow-tooltip label="得分" />
                    </el-table>

                    <div v-else-if="currentValue === '1'">
                        <el-table :data="problemRecord.items" style="height: 265px;">
                            <el-table-column prop="problemId" show-overflow-tooltip label="id" />
                            <el-table-column prop="problemDescribe" show-overflow-tooltip label="题目描述" />
                            <el-table-column label="结果" show-overflow-tooltip>
                                <template #default="scope">
                                    <span>{{ scope.row.result ? '正确' : '错误' }}</span>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination"><el-pagination layout="prev, pager, next"
                                :page-size="problemRecordParm.pageSize" :current-page="problemRecordParm.pageNo"
                                :total="problemRecord.counts" @current-change="handlePageChange" /></div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>


    <el-dialog v-model="showUserDetail" style="width: 500px;height: 550px;" title="个人资料">
        <el-form :model="userInfoParm">
            <el-form-item prop="userName"><el-text style="width: 80px;text-align: right;">用户名：</el-text><el-input v-model="userInfoParm.userName" style="width: 300px;" /></el-form-item>
            <el-form-item prop="password"><el-text style="width: 80px;text-align: right;">密码：</el-text><el-input v-model="userInfoParm.password" style="width: 300px;" maxlength="30" show-word-limit show-password type="password"/></el-form-item>
            <el-form-item prop="realName"><el-text style="width: 80px;text-align: right;">真实姓名：</el-text><el-input v-model="userInfoParm.realName" style="width: 300px;" /></el-form-item>
            <el-form-item prop="email"><el-text style="width: 80px;text-align: right;">邮箱：</el-text><el-input v-model="userInfoParm.email" style="width: 300px;"/></el-form-item>
            <el-form-item ><el-text style="width: 80px;text-align: right;">个人简介：</el-text><el-input v-model="userInfoParm.introduction" maxlength="100" show-word-limit style="width: 300px;"/></el-form-item>
            <el-form-item >
                <el-text style="width: 80px;text-align: right;">个人头像：</el-text>
                <el-upload :show-file-list="false" class="avatar-uploader" :before-upload="uploadAvatar">
                    <img v-if="userInfoParm.avatar" :src="config.API_URL+'/'+userInfoParm.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    
                </el-upload>
            </el-form-item>
            <el-form-item><div style="margin-left: 40%;"><el-button  type="success" plain @click="async()=>{await updateUser(),showUserDetail=false,getUserInfo(loginUserId)}">保存</el-button> </div></el-form-item>

        </el-form>
    </el-dialog>
</template>


<script setup lang="ts">
import useUser from '@/hooks/useUser';
import useEcharts from '@/hooks/useEcharts';
import useTest from '@/hooks/useTest';
import { onMounted } from 'vue';
import { ref,inject } from 'vue';
import useExam from '@/hooks/useExam';
import Config from '@/types/config';
const props = defineProps(['userId'])
const { ranking, chartRef, chartRefRight, init, init2 } = useEcharts();
const { userInfo, userProblemCollectList, userProblemCollectParm,userInfoParm,uploadAvatar,updateUser, getUserProblemCollect, getUserInfo } = useUser()
const { testList, getTextList, handlePageChange, problemRecordParm, problemRecord, getProblemRecord } = useTest()
const { userExamList, getUserExamList } = useExam()
const currentValue = ref<string>('1')
const loginUserId = localStorage.getItem('loginUserId')
const showUserDetail=ref<boolean>(false)

const config:Config = inject('$config');
const handleSelect = (value) => {
    currentValue.value = value
    if (currentValue.value === '1') {
        getProblemRecord()
    } else if (currentValue.value === '2') {
        getTextList(props.userId)
    } else {
        getUserExamList(props.userId)
    }
}

const handlePageChange2 = (value) => {
    userProblemCollectParm.value = value
    getUserProblemCollect()
}



onMounted(() => {
    problemRecordParm.value.pageSize = 3
    problemRecordParm.value.userId = props.userId
    getUserInfo(props.userId)
    getProblemRecord()
    init(props.userId)
    init2(props.userId)

    if (props.userId === loginUserId) {
        getUserProblemCollect()
    }

    
})

</script>


<style scoped>
.pagination {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.echarts {
    margin-top: -10%;
    height: 200px;
    width: 100%;
}

.echarts_right {
    margin-top: -25px;
    height: 180px;
    width: 400px;
}

.container {
    margin-top: 20px;
    margin-left: 10%;
}

.user_name {
    font-size: 25px;
}

.avatar2 {
    margin-right: 10px;
    float: left;
}

.left_card {
    width: 300px;
    min-height: 600px;
    border-radius: 10px;
}

.left_container {
    float: left;
}

.right_top_left {
    width: 50%;
    border-right: 2px solid rgb(180, 180, 180);
    float: left;
    height: 160px;
}

.right_top_right {
    margin-left: 50%;
    margin-top: 4%;
}

.right_top {
    width: 800px;
    height: 200px;
    border-radius: 10px;
}

.right_main {
    margin-top: 10px;
    border-radius: 10px;
    width: 800px;
    height: 400px;
}

.main {
    margin-top: 100px;
}

.right_container {
    margin-left: 23%;
}

.edit {
    width: 250px;
    border-radius: 10px;
}



</style>

<style>

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>